<template>
    <div>
        <el-dialog :title="form.id > 0 ? '编辑' : '添加'" :visible.sync="info.isShow" @close="reset">

            <el-form :model="form" :rules="rules" ref="useradd">

                <el-form-item label="角色" label-width="120px" prop="roleid">
                    <el-select v-model="form.roleid" placeholder="请选择">
                        <el-option v-for="item in rolelist.filter(item => item.status == 1)" :key="item.id"
                            :label="item.rolename" :value="item.id"></el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="账号" label-width="120px" prop="username">
                    <el-input v-model="form.username" autocomplete="off" :disabled="Boolean(form.id)"
                        placeholder="请输入账号"></el-input>
                </el-form-item>

                <el-form-item label="密码" label-width="120px" prop="password">
                    <el-input v-model="form.password" autocomplete="off" placeholder="请输入密码">
                    </el-input>
                </el-form-item>

                <el-form-item label="菜单状态" label-width="120px" prop="status">
                    <el-radio-group v-model="form.status">
                        <el-radio :label="3">正常</el-radio>
                        <el-radio :label="6">禁用</el-radio>
                    </el-radio-group>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="reset">取 消</el-button>
                <el-button type="primary" @click="submit">确 定</el-button>
            </div>

        </el-dialog>
    </div>
</template>


<script>
import { mapActions, mapState } from "vuex"
export default {
    data() {
        return {
            form: {
                roleid: "",
                username: "",
                status: "",
                password: ""
            },
            rules: {
                roleid: { required: true, message: "请选择角色编号", trigger: "blur" },
                password: { required: true, message: "请输入管理员密码", trigger: "blur" },
                status: { required: true, message: "请选择菜单状态", trigger: "blur" },
                username: { required: true, message: "请输入管理员账号", trigger: "blur" },
            }
        }
    },
    props: ["info"],
    computed: {
        ...mapState("role", ["rolelist"])
    },
    methods: {
        ...mapActions("role", ["getrolelist"]),
        reset() {
            this.info.isShow = false
            console.log("取消");
            // 清空表单信息
            this.form = {
                roleid: "",
                username: "",
                status: "",
                password: ""
            }
        },
        submit() {
            // 判断如果表单中的值被选中和没被选的时候
            this.$refs.useradd.validate(value => {
                if (value) {
                    this.$Api.useradd(this.form).then(res => {
                        console.log(res, 12123456645);
                        // 如果成功关闭dialog页面，重新渲染页面，提示信息
                        if (res.code == 200) {
                            this.$message.success(res.msg)
                            // 重新调用这个页面
                            this.getrolelist()
                            // 调用reset取消函数
                            this.reset()
                        }
                    })
                    return
                }
            })
        }
    },
    mounted() {
        // 调用
        this.getrolelist()
    },
}

</script>


<style leng='less' scoped>

</style>